import { useEffect, useState } from 'react';
import { Empty } from 'antd';
import { TextWidget } from '@inbiz/react';
import { InbizIcon } from '@inbiz/utils';
import PageComponent from '../SyncComponents/Pagination';
import './index.less';

type IProps = {
  allItems: {
    font_class: string;
    icon_id: string;
    name: string;
    unicode: string;
    unicode_decimal: number;
  }[];
  selected: string;
  serchValue: string;
  handlePicker: (name: string) => void;
  currentTab: string;
  isHideTitle?:boolean;
  showIconGroup?:Array<string>
};

export type IIconItem = {
  icon_id: string;
  name: string;
  font_class: string;
  unicode: string;
  unicode_decimal: number;
};
const IconTabPanContent = (props: IProps) => {
  const { allItems, selected, serchValue, handlePicker, currentTab, isHideTitle,showIconGroup } = props;
  // 分页的数据
  const [pageIndex, setPageIndex] = useState(1);
  const [pageSize, setPageSize] = useState(80);
  const [total, setTotal] = useState(allItems?.length);
  const [nowShowAllData, setNowShowAllData] = useState(allItems);
  const [showData, setShowData] = useState<IIconItem[]>([]);
  useEffect(() => {
    setPageIndex(1);
  }, [currentTab]);
  // 分页
  useEffect(() => {
    let nowShowItems = nowShowAllData;
    nowShowItems = nowShowItems.slice(
      (pageIndex - 1) * pageSize,
      (pageIndex - 1) * pageSize + pageSize,
    );
    setShowData(nowShowItems as any);
  }, [pageSize, pageIndex, serchValue]);

  // 搜索
  useEffect(() => {
    if (serchValue?.length > 0) {
      let nowShowItems = allItems;
      if (serchValue && serchValue?.length > 0) {
        nowShowItems = nowShowItems.filter((item) => {
          return item.name.includes(serchValue);
        });
      }
      setTotal(nowShowItems.length);
      setNowShowAllData(nowShowItems as any);

      nowShowItems = nowShowItems.slice(
        (pageIndex - 1) * pageSize,
        (pageIndex - 1) * pageSize + pageSize,
      );
      setShowData(nowShowItems as any);
      if (pageIndex != 1) {
        setPageIndex(1);
      }
    } else if (!serchValue || serchValue?.length === 0) {
      setNowShowAllData(allItems as any);
      setTotal(allItems?.length);
      if (pageIndex != 1) {
        setPageIndex(1);
      } else {
        let nowShowItems = allItems;
        nowShowItems = nowShowItems.slice(
          (pageIndex - 1) * pageSize,
          (pageIndex - 1) * pageSize + pageSize,
        );
        setShowData(nowShowItems as any);
      }
    }
  }, [serchValue]);
  return (
    <>
      <div className="iconContent">
        <div
          style={{
            display: 'flex',
            flexWrap: 'wrap',
            paddingTop: 4,
            height:showIconGroup?.length? 235:328,
            alignContent: 'flex-start',
          }}
        >
          {showData && showData.length > 0 ? (
            showData.map((item, i) => {
              return (
                <div
                  title={showIconGroup?.length?'':item.name}
                  className={
                    'iconPicker' + ' ' + (selected === `icon-${item.font_class}` ? 'selected' : '')
                  }
                  onClick={() => handlePicker(`icon-${item.font_class}`)}
                  //@ts-ignore
                  key={item.font_class}
                  style={{height:isHideTitle?'36px':'72px'}}
                >
                  <InbizIcon
                    type={`icon-${item.font_class}`}
                    style={{
                      fontSize: 21,
                      color: '#999999',
                    }}
                  />
                  <span className="iconPickerText" style={{display:isHideTitle?'none':'block'}}>{item.name}</span>
                </div>
              );
            })
          ) : (
            <div className="showEmpty">
              <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description={<TextWidget>pageselect.no_data</TextWidget>}
              />
            </div>
          )}
        </div>
      </div>
      <PageComponent
        className="iconPickerPageNation"
        size='small'
        pageSize={pageSize}
        current={pageIndex}
        onChange={(pageInfo: any) => {
          setPageIndex(pageInfo.current)
          setPageSize(pageInfo.pageSize)
        }}
        options={[20, 50, 80, 100, 200]}
        total={total}
      />
    </>
  );
};

export default IconTabPanContent;
